<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TreeMenu</title>
</head>
<body>
<script src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>


<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    $(function () {
        loadData();
    })
    function loadData() {
        layui.use('tree', function(){
            var tree = layui.tree;
            $.post('/TreeMenu/loadmenu',{}, function(result) {

                var inst1 = tree.render({
                    elem: '#test1'  //绑定元素
                    ,data:result
                    ,edit: ['add', 'update', 'del']
                    ,id: 'demoId' //定义索引
                    //,showLine:false
                    ,click: function(obj){ //节点的点击事件
                        console.log(obj.data); //得到当前点击的节点数据

                    }
                    ,operate: function(obj){
                        var type = obj.type; //得到操作类型：add、edit、del
                        var data = obj.data; //得到当前节点的数据
                        var elem = obj.elem; //得到当前节点元素
                        console.log(type)
                        console.log(data)
                        console.log(elem)


                        //Ajax 操作
                        var id = data.id; //得到节点索引
                        console.log(id)
                        if(type === 'add'){ //增加节点
                            layer.prompt({
                                title: '新增',
                            },function(value, index, elem){
                                var obj={
                                    id:Math.floor(Math.random()*10000),
                                    title:value,
                                    parentId:data.id,
                                    url:null,
                                    icon:null
                                };
                                $.post("/TreeMenu/add",obj,function (choose) {
                                    if(choose=="success"){
                                        layer.msg("添加成功!")
                                        setTimeout(function () {
                                            location.reload();
                                        },2000)
                                    }else{
                                        layer.msg("添加失败!")
                                    }
                                })
                                layer.close(index);
                            });

                            //返回 key 值
                            return 123;
                        } else if(type === 'update'){ //修改节点
                            console.log(elem.find('.layui-tree-txt').text()); //得到修改后的内容
                            layer.prompt(function(value, index, elem){
                                var obj={
                                    id:id,
                                    title:value,
                                };
                                $.post("/TreeMenu/update",obj,function (choose) {
                                    if(choose=="success"){
                                        layer.msg("添加成功!")
                                        setTimeout(function () {
                                            location.reload();
                                        },2000)
                                    }else{
                                        layer.msg("添加失败!")
                                    }
                                })
                                layer.close(index);
                            });
                        } else if(type === 'del'){ //删除节点
                            console.log(data.id)
                            $.post("/TreeMenu/del",{"id":data.id},function (choose) {
                                if(choose=="success"){
                                    layer.msg("删除成功!")
                                    setTimeout(function () {
                                        location.reload();
                                    },2000)
                                }else{
                                    layer.msg("删除失败!")
                                }
                            })
                        };
                    }
                })
                console.log(result)
            })
        })
    }
</script>
<div id="test1"></div>
</body>
</html>